<section id="main-content">
  <section class="wrapper">
    <!--state overview start-->
    <div class="row">
      <div class="col-lg-12">
        <!-- <div class="view-header">
          <div class="view-search">
            <label class="pull-left">登录人：</label>
            <input type="text" id="autocomplete" value="" class="form-control">
            <input type="hidden" value="" name="userId" id="userId" />
            <a href="javascript:void(0);" class="btn btn-info pull-left searchs">搜索</a>
          </div>
        </div> -->

        <section class="panel">
          <div class="panel-body" style="padding-bottom:0;">
            <div class="row">
              <div class="col-lg-3">
                <div class="input-group m-bot15">
                  <span class="input-group-addon">登录人</span>
                  <input type="text" id="autocomplete" value="" class="form-control" style="border-top-right-radius:4px;border-bottom-right-radius:4px;">
                  <input type="hidden" value="" name="userId" id="userId" />
                </div>
              </div>
              <div class="col-lg-3">
                <button class="btn btn-info pull-left searchs" style="margin-bottom:15px;">搜索</button>
              </div>
            </div>
          </div>
        </section>

        <section class="panel">
          <header class="panel-heading">
            登录信息
          </header>
          <div class="panel-body">
            <div id="lgContainer" class="dlshouwen-grid-container"></div>
            <div id="lgToolBarContainer" class="dlshouwen-grid-toolbar-container"></div>
          </div>
        </section>
      </div>
    </div>
    <!--state overview end-->
  </section>
</section>
<script type="text/javascript" src="js/autocomplete/jquery.autocomplete.js"></script>
<!-- 当前页面js文件引入 -->
<script type="text/javascript">
  function findLginfos(CertusFormAjax) {
    CertusFormAjax.ajax("findSpUserList", {}, function (response) {
      var nhlTeams = [];
      var data = response.data;
      for (var i = 0; i < data.length; i++) {
        var arr = {};
        arr.name = data[i].userName;
        arr.id = data[i].userId;
        nhlTeams.push(arr);
      }
      //自动补全
      var nhl = $.map(nhlTeams, function (obj) {
        return {
          value: obj.name,
          data: {
            category: obj.id
          }
        };
      });
      // Initialize autocomplete with local lookup:
      $('#autocomplete').devbridgeAutocomplete({
        lookup: nhl,
        minChars: 1,
        onSelect: function (suggestion) {
          $("#userId").val(suggestion.data.category);
        },
        showNoSuggestionNotice: true,
        noSuggestionNotice: 'Sorry, no matching results'
      });
    });

    var zbColumns = [{
      id: 'loginUserName',
      title: '登录人',
      type: 'string',
      columnClass: 'text-center'
    }, {
      id: 'loginIp',
      title: '登录IP',
      type: 'string',
      columnClass: 'text-center',
    }, {
      id: 'loginTime',
      title: '登录时间',
      type: 'string',
      columnClass: 'text-center'
    }];
    this.search = function (userId) {
      $("#lgContainer").empty();
      $("#lgToolBarContainer").empty();
      CertusFormAjax.ajax('findLoginxxs', { "userId": userId }, function (response) {
        var makingOption = {
          lang: 'zh-cn',
          ajaxLoad: false,
          extraWidth: 20,
          // loadURL:'url',
          exportFileName: '登录信息列表',
          datas: response.data,
          columns: zbColumns,
          gridContainer: 'lgContainer',
          toolbarContainer: 'lgToolBarContainer',
          tools: '',
          pageSize: 20,
          pageSizeLimit: [20, 30, 40]
        };
        var makingGrid = $.fn.dlshouwen.grid.init(makingOption);
        makingGrid.load();
      });
    };
    search("");
    $(".searchs").on('click', function () {
      search($("#userId").val());
    });
  }
</script>